<template>
  <div class="layout-padding">
    <div class="layout-padding-view gdzlzhpj-page">
      <MyMap>
        <ToolWrap>
          <BaseMap></BaseMap>
        </ToolWrap>
        <MapSupermapLayer
          url="http://123.127.160.203:8091/iserver/services/map-nercita_cloud/rest/maps/hlnc_gddldcdw_2010?prjCoordSys={epsgCode:4326}"
        ></MapSupermapLayer>
        <div class="echart-card">
          <el-card title="土壤养分样点统计">
            <div ref="echartsRef" class="echarts"></div>
          </el-card>
        </div>
      </MyMap>
    </div>
  </div>
</template>

<script setup lang="ts" name="gdzlzhpj">
import { MyMap, BaseMap, ToolWrap, MapSupermapLayer } from '@/map';
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import { ref } from 'vue';

const echartsRef = ref();
const initChart = () => {
  const data = [
    {
      name: '一级',
      value: 10,
    },
    {
      name: '二级',
      value: 20,
    },
    {
      name: '三级',
      value: 30,
    },
    {
      name: '四级',
      value: 20,
    },
    {
      name: '五级',
      value: 10,
    },
    {
      name: '六级',
      value: 30,
    },
    {
      name: '七级',
      value: 20,
    },
    {
      name: '八级',
      value: 10,
    },
    {
      name: '九级',
      value: 20,
    },
    {
      name: '十级',
      value: 30,
    },
  ];
  const chart = echarts.init(echartsRef.value);

  const option = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {},
    series: [
      {
        type: 'pie',
        center: ['50%', '60%'],
        radius: ['22%', '40%'],
        hoverAnimation: false,
        label: {
          show: true,
          formatter: '{b}\n{c}',
        },
        labelLine: {
          normal: {
            length: 35 * 1,
            length2: 0,
          },
        },
        data: data,
      },
    ],
  };
  chart.setOption(option);
};

onMounted(() => {
  initChart();
});
</script>

<style scoped lang="scss">
.echart-card {
  position: absolute;
  right: 20px;
  top: 100px;

  .echarts {
    width: 360px;
    height: 300px;
  }
}
</style>
